<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<c:url value='/resources/lib/jquery.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/lib/jquery.jqplot.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/lib/plugins/jqplot.barRenderer.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/lib/plugins/jqplot.categoryAxisRenderer.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/lib/plugins/jqplot.pointLabels.min.js'/>"></script>
<link rel="stylesheet" type="text/css" href="resources/lib/jquery.jqplot.min.css" />
<script type="text/javascript">
$(document).ready(function(){
	  var s1 = [2, 6, 7, 10];
	  var s2 = [7, 5, 3, 4];
	  
	  plot3 = $.jqplot('chart3', [s1, s2], {
	    // Tell the plot to stack the bars.
	    stackSeries: true,
	    captureRightClick: true,
	    seriesDefaults:{
	      renderer:$.jqplot.BarRenderer,
	      rendererOptions: {
	          // Put a 30 pixel margin between bars.
	          barMargin: 30,
	          // Highlight bars when mouse button pressed.
	          // Disables default highlighting on mouse over.
	          highlightMouseDown: true   
	      },
	      pointLabels: {show: true}
	    },
	    axes: {
	      xaxis: {
	          renderer: $.jqplot.CategoryAxisRenderer
	      },
	      yaxis: {
	        // Don't pad out the bottom of the data range.  By default,
	        // axes scaled as if data extended 10% above and below the
	        // actual range to prevent data points right on grid boundaries.
	        // Don't want to do that here.
	        padMin: 0
	      }
	    },
	    legend: {
	      show: true,
	      location: 'e',
	      placement: 'outside'
	    }      
	  });
	  // Bind a listener to the "jqplotDataClick" event.  Here, simply change
	  // the text of the info3 element to show what series and ponit were
	  // clicked along with the data for that point.
	  $('#chart3').bind('jqplotDataClick', 
	    function (ev, seriesIndex, pointIndex, data) {
	      $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
	    }
	  ); 
	});
</script>
<title>Insert title here</title>
</head>
<body>

<div align="left" id="chart3" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
<div align="right" id="info3" style="margin-top:20px; margin-left:720px; width:100px; height:120px;"></div>
</body>
</html>